<template>
  <div>
    <div v-show="flag">
      <van-nav-bar
        title="管理我的应用"
        left-text="取消"
        right-text="完成"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />

      <div class="box">
        <van-grid>
          <van-grid-item
            v-for="(item, index) in list"
            v-show="item.flag"
            @click="changItem(index)"
            :key="index"
            :icon="item.icon"
            :text="item.title"
            badge="x"
          />
        </van-grid>
      </div>
       <van-button style="width: 100%" type="info"></van-button>
      <!-- 全部应用 -->
      <div class="all">
        <van-grid>
          <van-grid-item
            v-for="(item, index) in list"
            v-show="!item.flag"
            @click="changItem(index)"
            :key="index"
            :icon="item.icon"
            :text="item.title"
            badge="+"
          />
        </van-grid>
      </div>
    </div>

    <van-button v-show="!flag" style="width: 100%" @click="isShow" type="info"
      >点我</van-button
    >
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState(["list"]),
  },
  data() {
    return {
      flag: false,
      arr: []
    };
  },
  created() {
    this.arr = JSON.parse(JSON.stringify(this.list))
  },
  methods: {
    ...mapMutations(["CHNAGE_ITEM", "CHANGE_LIST"]),
    onClickLeft() {
      this.CHANGE_LIST({
        list: this.arr
      })
    },
    onClickRight() {
      this.$router.push('/home')
    },
    isShow() {
      this.flag = true;
    },
    changItem(index) {
      this.CHNAGE_ITEM({
        index
      })
    }
  },
};
</script>

<style lang="scss">
.box {
  .van-info {
    background: #ccc !important;
  }
}

.all {
  .van-info {
    background: skyblue !important;
  }
}
</style>